<template>
  <div>
    <el-table :data="tableData" border width="100%" row-key="id" align="left" v-show="showDictItem">
      <el-table-column width="50px" type="selection">
      </el-table-column>
      <el-table-column width="60px" label="序号" type="index">
      </el-table-column>
      <el-table-column class-name="allowDrag" v-for="(item, index) in col" :row-key="index" :key="`col_${index}`"
        :prop="dropCol[index].prop" :label="item.label">
        <template slot-scope="scope">
          <span v-if="item.prop != 'operate'">{{ scope.row[item.prop] }}</span>
          <span v-else>
            <el-button @click="comfirmBtn">1111</el-button>
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" min-width="100" prop="operate">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-popover placement="top" v-model="scope.row.visible">
            <p>确定要删除当前内容？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" plain @click="scope.row.visible = false">取消</el-button>
              <el-button type="primary" size="mini"
                @click="handleDelete(scope.$index, scope.row), scope.row.visible = false">确定</el-button>
            </div>
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popover>
          <el-button size="mini" type="primary" @click="handleDefault(scope.$index, scope.row)"
            v-show="scope.row.defaultValue === 0">默认</el-button>
          <el-button size="mini" type="primary" @click="handleDefault(scope.$index, scope.row)"
            v-show="scope.row.defaultValue === 1">取消</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
 <script>
import Sortable from 'sortablejs';
export default {
  data () {
    return {
      showDictItem: true,
      col: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
        { label: "操作", prop: "operate" }
      ],
      dropCol: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
        { label: "操作", prop: "operate" }
      ],
      tableData: [
        { id: '1', date: '2016-05-02', name: '王小虎1', address: '上海市普陀区金沙江路 100 弄' },
        { id: '2', date: '2016-05-04', name: '王小虎2', address: '上海市普陀区金沙江路 200 弄' },
        { id: '3', date: '2016-05-01', name: '王小虎3', address: '上海市普陀区金沙江路 300 弄' },
        { id: '4', date: '2016-05-03', name: '王小虎4', address: '上海市普陀区金沙江路 400 弄' }
      ],
      count: 3,
    };
  },
  created () {
    fetch("./vform4.json").then(res => {
      return res.json()
    }).then(res => {
      console.log(res);
      // this.list = res;
      // this.setNum(res)
      let xData = []
      xData = res.map(item => {
        return item.year
      })
      console.log(xData, 'xData');
      // let obj = {
      //   name: '',
      //   type: 'line',
      //   data: []
      // }

      let seriesData = []

      res.map(item => {
        item.alarmTimesList.map(json => {
          if (!seriesData.includes(json.orgAlias)) {
            seriesData.push(json.orgAlias)
          }

        })

      })

      console.log(seriesData, 'seriesData');
      // var oData = []
      let arr = []
      res.map((item) => {
        item.alarmTimesList.map((item1) => {
          let tmpname = item1.orgAlias
          // 查找是否有这一项
          let tmpIndex = arr.findIndex(item2 => {
            return item2.name == tmpname
          })
          console.log(tmpIndex, 'tmpIndex');
          if (tmpIndex == -1) {
            let tmpDatearr = []
            tmpDatearr.push(item1.times)
            let arritem = {
              name: tmpname,
              type: 'line',
              data: tmpDatearr
            }
            console.log(arritem, 'arritem');
            arr.push(arritem)
          } else {
            arr[tmpIndex].data.push(item1.times)
          }
        })
      })
      console.log(arr, '123');
    })

    //
  },
  mounted () {
    this.rowDrop();
    this.columnDrop();

  },
  methods: {
    // 行拖拽
    rowDrop () {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this; Sortable.create(tbody, {
        // 指定父元素下可被拖拽的子元素
        draggable: ".el-table__row", onEnd ({ newIndex, oldIndex }) { const currRow = _this.tableData.splice(oldIndex, 1)[0]; _this.tableData.splice(newIndex, 0, currRow); }
      });
    },
    // 列拖拽
    columnDrop () {
      console.log(1111)
      //  let _this = this;
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        filter: ".el-table-column--selection,.el-table_1_column_2 ",
        animation: 180, delay: 0, onEnd: evt => {
          let obj = JSON.parse(JSON.stringify(this.dropCol));
          if (evt.oldIndex > 1 && evt.newIndex > 1) {
            const oldItem = obj[evt.oldIndex - 2];
            obj.splice(evt.oldIndex - 2, 1);
            obj.splice(evt.newIndex - 2, 0, oldItem);
          }
          this.col = [];
          this.dropCol = [];
          this.$nextTick(() => {
            this.dropCol = obj;
            this.col = obj;
          })
        }
      });
    },
    showMessage () {
      this.$alert(`${this.count}秒后关闭页面`, '提示', {
        confirmButtonText: '确定',
        callback: () => {
          window.opener = null
          window.open('about:blank', '_top').close()
        }
      });
    },
    comfirmBtn () {
      this.showMessage()
      let cy = () => {
        setTimeout(() => {
          this.count--;
          let tex = document.querySelector(".el-message-box__message").children[0]
          tex.innerHTML = `${this.count}秒后关闭页面`;
          if (this.count != 0) {
            cy()
          } else {
            window.opener = null
            window.open('about:blank', '_top').close()
          }
        }, 1000)
      }
      cy()


    }
  }
};
 </script>